<template>
  <div class="box" :class="{ isAnimate: isAnimate }">
    {{ 1 + 1 }}
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
  <img :src="image()" alt="" />
  <div ref="custom"></div>
</template>
<script lang="jsx">
import custom1 from './components/custom1.vue'
import { ref, createApp, h, render } from 'vue'
import { mat2d } from '../../libs/glmatrix/gl-matrix-min.js'

export default {
  components: {},
  data() {
    return {
      isAnimate : false,
      config : {
        src : ''
      }
    }
  },
  methods: {
    image(){
      return 'https://www.baidu.com' + this.config.src;
    },
    add() {
      this.config.src = +new Date();
    }
  },
  mounted() {
    $(this.$refs['custom']).html('<div class="test">测试</div>');
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: all 0.5s ease;
  &.isAnimate {
    //transform: matrix(0.5, 0, 0, 0.5, 100, 50);
    //transform: matrix(1, 0, -1, 1, 0, 0);
    transform: matrix(1, -0.2, 0, 1, 0, 0);
    //animation: move 0.5s linear;
  }
}
@keyframes move {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  25% {
    transform: matrix(1, 0, -0.2, 1, 0, 0);
  }
  75% {
    transform: matrix(1, 0, 0.2, 1, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
</style>
